<template>
  <nut-wrapper>
    <view class="test-page">
      <nut-tabs v-model="activeTab">
        <nut-tab-pane title="单选模式">
          <calendar-component
            mode="single"
            class="calendar-component"
            :value="singleDate"
            @dateChange="handleSingleDateChange"
          />
        </nut-tab-pane>
        <nut-tab-pane title="多选模式">
          <calendar-component
            mode="multiple"
            class="calendar-component"
            :value="multipleDates"
            @dateChange="handleMultipleDateChange"
          />
        </nut-tab-pane>
        <nut-tab-pane title="范围选择">
          <calendar-component
            mode="range"
            class="calendar-component"
            :value="rangeDates"
            @dateChange="handleRangeDateChange"
          />
        </nut-tab-pane>
      </nut-tabs>
    </view>
  </nut-wrapper>
</template>

<script>
import Taro from "@tarojs/taro";
import CalendarComponent from "@/components/CalendarComponent";
import { formatDate } from "@/components/CalendarComponent/utils";

export default {
  components: {
    CalendarComponent,
  },

  data() {
    return {
      activeTab: 0,
      singleDate: new Date(),
      multipleDates: [],
      rangeDates: [],
    };
  },

  methods: {
    formatDate,

    handleSingleDateChange(date) {
      this.singleDate = date;
      Taro.showToast({
        title: `已选择: ${formatDate(date)}`,
        icon: "none",
      });
    },

    handleMultipleDateChange(dates) {
      this.multipleDates = dates;
      Taro.showToast({
        title: `已选择 ${dates.length} 个日期`,
        icon: "none",
      });
    },

    handleRangeDateChange(dates) {
      this.rangeDates = dates;
      if (dates.length === 2) {
        Taro.showToast({
          title: `已选择: ${formatDate(dates[0])} 至 ${formatDate(dates[1])}`,
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.test-page {
  background-color: #fff;
  min-height: 100vh;

  .selected-dates {
    padding: 20rpx;
    margin-top: 20rpx;
    background-color: #fff;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

    .title {
      font-size: $font-size-2;
      color: $text-color;
      margin-bottom: 10rpx;
    }

    .date-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10rpx;

      .date-item {
        padding: 10rpx 20rpx;
        background-color: $primary-color;
        color: #fff;
        border-radius: 8rpx;
        font-size: $font-size-1;
      }
    }

    .range-dates {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20rpx;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      font-size: 28rpx;
      color: #333;
    }

    .range-dates .separator {
      margin: 0 20rpx;
      color: #999;
    }
  }
}

// 深色模式
[data-theme="dark"] {
  .test-page {
    background-color: #000;

    .selected-dates {
      background-color: #000;

      .title {
        color: #fff;
      }

      .date-list .date-item {
        background-color: #000;
      }

      .range-dates {
        background-color: #333;
        color: #fff;
      }

      .range-dates .separator {
        color: #666;
      }
    }
  }
}
</style>
